﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowWidgets.aspx.cs" Inherits="JQueryWidget.WidgetFrame.ShowWidgets" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
    <style type="text/css">
    .widgetStore
    {
    }
    .column
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    
    .widgetholder1
    {
        border:2px dashed gray; 
        position:relative;
        margin-top:10px;
        height:40px;
    }
    .toolbox
    { 
        float:right;
        border:1px solid gray; 
        position:right top;
        z-index:100;
    }
    .toolbox_title
    {
        background-color:lightblue;
    }
    .toolbox_body
    {
        display:none;
    }
    .additem
    {
    }
    </style>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-ui.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    
    <div class="toolbox">
        <div class="toolbox_title">
            Tool Box
        </div>
        <div class="toolbox_body">
            <div>
                <a class="additem">Add Calendar</a>
            </div>
            <div>
                <a class="additem">Add RSS</a>
            </div>
        </div>
    </div>
    <div class="widgetStore">
        <div class="column droppable">
            <div class="widget draggable">
                <div class="widget_header">
                    Calendar
                </div>
                <div class="widget_body">
                    <iframe src="Widgets/CalendarWidgetPage.aspx" marginheight="0" marginwidth="0" frameborder="0" height="200px" width="100%"  scrolling="auto"></iframe>
                </div>
                <div class="widget_footer">
                </div>
            </div>  

        </div>
        <div class="column droppable">
                          
        </div>
        <div class="column droppable">
         
        </div>
    </div>

    <div class="widgetholder">
        widgetholder
    </div>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $(".toolbox").hover(
                function () {
                    $(this).children(".toolbox_title").hide();
                    $(this).children(".toolbox_body").show();
                },
                function () {
                    $(this).children(".toolbox_body").hide();
                    $(this).children(".toolbox_title").show();
                });
            $(".column").sortable({
                placeholder: "widgetholder1",
                connectWith: ".column"
            });
            //            $(".toolbox_body").sortable({
            //                helper: "clone",
            //                connectWith: ".column",
            //                placeholder: "widgetholder1",
            //                revert:true });
            $(".additem").draggable({helper:'clone'});
        });
    </script>
    </form>
</body>
</html>
